<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <XForm ref="form" :fieldList="fieldList" :options="formOption" :formData="form" :originOption="originOption" class="grid grid-cols-3">
          <template #year>
            <el-date-picker v-model="form.value3" type="year" placeholder="年份" />
          </template>
        </XForm>
      </template>
      <template #toolbar_btns>
        <el-button @click="importHandleClick">
          <span class="flex items-center"> <svg-icon icon-class="import" class="mr-[4px]" /> 导出 </span>
        </el-button>
        <div class="ml-auto"></div>
        <FieldSelectBtn :fieldSelectConfig="fieldSelectConfig" @submit="query" />
      </template>
    </VTable>
    <!-- 导出中心 -->
    <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
  </VPage>
</template>

<script setup lang="jsx">
import { ElMessage, ElMessageBox } from "element-plus"
import XForm from "@/components/XForm/index.vue"
import { onMounted, ref, toRefs } from "vue"

import { fullProcessAnalysisSearch } from "@/api/salesInventory"

const tableRef = ref()
// 字段模版
import FieldSelectBtn from "@/views/salesInventory/components/FieldSelectBtn.vue"
const fieldSelectConfig = ref({
  save: "flowInventoryCollect",
  columnsShow: [],
  columns: [],
})
// 导出中心
import DerivedCenter from "@/components/DerivedCenter"
const DerivedCenterRef = ref()
const importHandleClick = async (e) => {
  let condition = initForm(tableRef?.value?.getQueryForm())
  DerivedCenterRef.value.open({ tag_name: "FULL_PROCESS_SEARCH", condition })
}

// 查询
const query = () => {
  tableRef?.value.query()
}
const formShow = ref(false)
import { getAloneEnum } from "@/utils/enumUtils"
//获取下拉数据
onMounted(async () => {
  let oneKeys = ["wmsAttribute", "warehouse", "amazonSite"]
  let optData = await getAloneEnum(oneKeys)
  oneKeys.forEach((key) => {
    originOption.value[key] = optData?.[key]
  })
  setTimeout(() => {
    formShow.value = true
    // 初始化 列
    initTableColumn()
  }, 100)
})

// 枚举 数据
const originOption = ref({})
const formOption = ref({ inline: true })
const publicStyle = { style: { width: "200px" } }
const fieldList = ref([
  {
    field: "warehouse_id",
    type: "select",
    originField: "warehouse",
    multiple: true,
    collapseTags: true,
    options: { placeholder: "仓库" },
    ...publicStyle,
  },
  {
    field: "warehouse_attr",
    type: "select",
    originField: "wmsAttribute",
    multiple: true,
    collapseTags: true,
    options: { placeholder: "仓库属性" },
    ...publicStyle,
  },

  {
    field: "category",
    type: "cascaderNew",
    cascaderType: "category",
    placeholder: "产品品类",
    ...publicStyle,
  },
  {
    field: "owner_id",
    type: "cascaderNew",
    placeholder: "货主",
    cascaderProps: {},
    ...publicStyle,
  },
  {
    field: "department_id",
    type: "cascaderNew",
    cascaderType: "department",
    placeholder: "组织维度",
    cascaderProps: {},
    ...publicStyle,
  },

  {
    field: "country",
    type: "select",
    originField: "amazonSite",
    options: { placeholder: "国家" },
    ...publicStyle,
  },
  {
    field: "sss11",
    type: "select",
    originField: "platform",
    options: {
      placeholder: "品牌/贸易 x",
    },
    ...publicStyle,
  },
  {
    field: "deadline_at",
    type: "dateTimeRangeNorm",
    itemProps: {
      type: "daterange",
      valueFormat: "YYYY-MM-DD",
    },
    style: { width: "300px" },
  },
  {
    field: "sku",
    placeholder: "SKU",
    type: "textarea",
    style: { width: "200px" },
  },
])

// 初始化时间
import { parseTime } from "@/utils/ruoyi"
const initDate = () => {
  const temp = new Date()
  temp.setTime(temp.getTime() - 3600 * 1000 * 24 * 560)
  return [new Date(temp.setHours(0, 0, 0, 0)), new Date(new Date().setHours(23, 59, 59, 0))].map((d) => parseTime(d, "{y}-{m}-{d}"))
}
// 列表配置
const tableOptins = reactive({
  formConfig: {
    data: { deadline_at: initDate() },
  },
  columns: [
    { type: "seq", title: "序号", width: 60 },
    { field: "department_name", title: "组织", width: 100 },
    { field: "category_text", title: "产品分类", width: 100 },
    { field: "country", title: "国家", width: 100 },
    { field: "owner_username", title: "货主", width: 100 },
    { field: "sku", title: "SKU", width: 100 },
    { field: "sku_cn_title", title: "产品名称", width: 100 },
    { field: "valiee1ee", title: "品牌/贸易 x", width: 100 },
    { field: "sales_volume_daily.sales_quantity", title: "销量", width: 100 },
    { field: "sales_volume_daily.sales_amount", title: "销售额", width: 100 },
    { field: "sales_volume_daily.purchase_cost", title: "采购成本", width: 100 },
    { field: "sales_volume_daily.fba_freight", title: "头程成本", width: 100 },
    {
      title: "在库数量",
      align: "center",
      children: [
        { title: "采购在途", field: "procurement_in_transit", width: 80 },
        { title: "本地仓在库", field: "local_warehouse_inventory", width: 100 },
        { title: "FBA在途", field: "fba_in_transit", width: 80 },
        { title: "海外仓在途", field: "ow_in_transit", width: 100 },
        { title: "海外中转仓在途", field: "otw_in_transit", width: 130 },
        { title: "WFS在途", field: "wfs_in_transit", width: 80 },
        { title: "FBA在库", field: "fba_inventory", width: 80 },
        { title: "海外仓在库", field: "ow_inventory", width: 130 },
        { title: "海外中转仓在库", field: "otw_inventory", width: 130 },
        { title: "WFS在库", field: "wfs_inventory", width: 80 },
        { title: "全流程", field: "full_process_inventory", width: 80 },
      ],
    },
    {
      title: "在库金额",
      align: "center",
      children: [
        { title: "采购在途", field: "procurement_in_transit_amount", width: 80 },
        { title: "本地仓在库", field: "local_warehouse_inventory_amount", width: 100 },
        { title: "FBA在途", field: "fba_in_transit_amount", width: 80 },
        { title: "海外仓在途", field: "ow_in_transit_amount", width: 100 },
        { title: "海外中转仓在途", field: "otw_in_transit_amount", width: 130 },
        { title: "WFS在途", field: "wfs_in_transit_amount", width: 80 },
        { title: "FBA在库", field: "fba_inventory_amount", width: 80 },
        { title: "海外仓在库", field: "ow_inventory_amount", width: 130 },
        { title: "海外中转仓在库", field: "otw_inventory_amount", width: 130 },
        { title: "WFS在库", field: "wfs_inventory_amount", width: 80 },
        { title: "全流程", field: "full_process_inventory_amount", width: 80 },
        { title: "库存VS销量 x", field: "value2", width: 100 },
      ],
    },
  ],
  proxyConfig: {
    ajax: {
      query: ({ page, form }) => {
        let params = {
          page: page.pageNum,
          page_size: page.pageSize,
          ...initForm(form),
        }
        return queryList(params)
      },
    },
  },
})
import { filterColumns } from "@/views/salesInventory/components/method.js"
const totalKey = ref("valieeeename")
const queryList = async (params) => {
  console.log(12)
  console.log(params)
  return await fullProcessAnalysisSearch(params)
}

// FBA  万邑通  谷仓   WFS
const warehouseTitle = [
  { title: "FBA", key: "fba" },
  { title: "万邑通", key: "winit" },
  { title: "谷仓", key: "gc" },
  { title: "WFS", key: "wfs" },
]
// 仓库列
const warehouseColumns = [
  { title: "在途数量", field: "in_transit", width: 80 },
  { title: "在途金额", field: "in_transit_amount", width: 80 },
  { title: "在库数量 x", field: "inventory", width: 80 },
  { title: "在库金额", field: "inventory_amount", width: 80 },
  { title: "数量汇总", field: "xxx5xxx", width: 100 },
  { title: "金额汇总", field: "xxxx7xx", width: 130 },
]

const quantityColumns = [
  { title: "1-30天", field: "in_quantity_1_30", width: 100 },
  { title: "31-60天", field: "in_quantity_31_60", width: 100 },
  { title: "61-90天", field: "in_quantity_61_90", width: 100 },
  { title: "91-180天", field: "in_quantity_91_180", width: 100 },
  { title: "181-270天", field: "in_quantity_181_270", width: 100 },
  { title: "271-365天", field: "xx4xx", width: 130 },
  { title: "365天以上", field: "XX12X3XX", width: 130 },
  { title: "总计", field: "otw_in_transit_amount", width: 130 },
]

const amountColumns = [
  { title: "1-30天", field: "in_amount_1_30", width: 100 },
  { title: "31-60天", field: "in_amount_31_60", width: 100 },
  { title: "61-90天", field: "in_amount_61_90", width: 100 },
  { title: "91-180天", field: "in_amount_91_180", width: 100 },
  { title: "181-270天", field: "in_amount_181_270", width: 100 },
  { title: "271-365天", field: "x2xxx", width: 130 },
  { title: "365天以上", field: "XXX3XX", width: 130 },
  { title: "总计", field: "otw_in_transit_amount", width: 130 },
]

const initTableColumn = () => {
  let warehouseC = []

  let quantityC = []
  warehouseTitle.forEach((item) => {
    warehouseC.push({
      title: item.title,
      align: "center",
      children: warehouseColumns.map((v) => ({ ...v, field: `${item.key}_${v.field}` })),
    })

    quantityC.push({
      title: `${item.title}数量（库龄维度）`,
      align: "center",
      children: quantityColumns.map((v) => ({ ...v, field: `${item.key}_${v.field}` })),
    })
    quantityC.push({
      title: `${item.title}金额（库龄维度）`,
      align: "center",
      children: amountColumns.map((v) => ({ ...v, field: `${item.key}_${v.field}` })),
    })
  })
  // 按筛选条件添加
  let columnsData = [...tableOptins.columns, ...warehouseC, ...quantityC]
  fieldSelectConfig.value.columns = columnsData
  const { columns, key } = filterColumns(columnsData, fieldSelectConfig.value.columnsShow)
  totalKey.value = key
  tableRef?.value?.$table.loadColumn(columns)
  tableRef?.value.updateScroll()
}

// 组装查询条件
const initForm = (form) => {
  if (form.deadline_at) {
    form.deadline_at = {
      start: form.deadline_at?.[0] || "",
      end: form.deadline_at?.[1] || "",
    }
  }
  let keys = ["sku"]
  keys.forEach((key) => {
    form[key] = form[key]?.split("\n")?.filter((v) => !!v.trim())
    form[key] = form[key]?.map((v) => v.trim())
  })
  return form
}
</script>
<style lang="scss" scoped>
:deep(.vxe-header--row:nth-child(2)) {
  .vxe-header--column {
    // background: #eff3fe !important;
    background: var(--base-table-hover-bg-color);
  }
}
</style>
